<template>
  <div class="subcribe-detail-dialog">
    <el-dialog
      v-loading="loading"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      :show-close="true"
      :append-to-body="true"
      :class="{'mobile-el-dialog':showMobilePage}"
      class="subcribe-common-dialog small-common-dialog-size"
      @close="closeDialog"
      @open="openDialog"
    >
      <Title title="查看预约" font-size="16px" style="margin: 0 0 16px"/>
      <el-form ref="subcribeRuleForm" class="lineHeight32" label-width="93px" label-position="left">
        <el-form-item label="资源名称：" prop="id">
          <resource-info
            v-if="info"
            :resource-name="info.resourceName"
            :account-name-organization="info.accountNameOrganization"
            :account-name-platform="info.accountNamePlatform"
            :resource-id="info.resourceCode"
            account-belong-name="none"
          />
        </el-form-item>
        <el-form-item label="预约名称：" prop="subscribeName">
          {{ subcribeInfo.subscribeName || '--' }}
        </el-form-item>
        <el-form-item label="投放类型" prop="type">
          {{ subcribeInfo.type || '--' }}
        </el-form-item>
        <el-form-item label="品牌名称：" prop="brandName">
          {{ subcribeInfo.brandName || '--' }}
        </el-form-item>
        <el-form-item label="下单形式：" prop="orderFormName">
          {{ subcribeInfo.orderFormName || '--' }}
        </el-form-item>
        <el-form-item label="品牌标签：" prop="demandCategory">
          {{ subcribeInfo.demandCategoryName || '--' }}
        </el-form-item>
        <el-form-item label="预约时间" prop="dateTime">
          {{ subcribeInfo.dateTime || '--' }}
        </el-form-item>
        <el-form-item label="排他时间" prop="exclusiveTime">
          {{ subcribeInfo.exclusiveTime }}
        </el-form-item>
        <el-form-item label="预约人：" prop="subscribeUsers">
          <ToolTip :content="switchSubcribeUser(subcribeInfo.subscribeUsers)" />
        </el-form-item>
        <el-form-item label="备注：" prop="remark">
          {{ subcribeInfo.remark || '--' }}
        </el-form-item>
      </el-form>
      <div class="dialog-footer">
        <el-button class="ok" type="primary" @click="handleClose">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Title from '@/components/Title';
import { subcribeDetail } from '@/api/subcribe';
import ResourceInfo from '@/components/ResourceInfo';
import { mapState } from 'vuex';
export default {
  name: 'SubcribeDetailDialog',
  components: { Title, ResourceInfo },
  data() {
    return {
      info: null,
      loading: false,
      dialogVisible: false,
      rules: {
        'id': [{ required: true, message: '', trigger: 'change' }],
        'subscribeName': [{ required: true, message: '请输入预约名称', trigger: 'change' }],
        'dateTime': [{ required: true, message: '请选择起止日期', trigger: 'change' }]
      },
      resourceName: '',
      accountNameOrganization: '',
      subcribeInfo: {
        id: '',
        subscribeName: '',
        subscribeUsers: [],
        remark: '',
        dateTime: '',
        orderForm: '',
        brandName: '',
        exclusiveTime: '',
        type: '',
        demandCategory: ''
      }
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  methods: {
    closeDialog() {
    },
    handleClose() {
      this.dialogVisible = false;
    },
    openDialog() {
      this.resourceName = this.info.resourceName;
      this.accountNameOrganization = this.info.accountNameOrganization || '';
      this.subcribeInfo.id = this.info.id;
      if (this.subcribeInfo.id) {
        this.getSubcribeDetail(this.subcribeInfo.id);
      }
    },
    initInfo(info) {
      this.info = info;
    },
    showType(type) {
      let typeName = '广告';
      if (type === 2) {
        typeName = '电商';
      }
      return typeName;
    },
    switchSubcribeUser(users) {
      if (users && users.length > 0) {
        const names = users.map(item => item.userName);
        return names.join('/');
      } else {
        return '--';
      }
    },
    getSubcribeDetail(id) {
      subcribeDetail(id).then(res => {
        if (res.code === 200) {
          Object.assign(this.subcribeInfo, { ...res.data });
          this.subcribeInfo.dateTime = res.data.startDate.replace(/-/g, '/') + '-' + res.data.endDate.replace(/-/g, '/');
          this.subcribeInfo.exclusiveTime = res.data.exclusiveStartTime ? (res.data.exclusiveStartTime.replace(/-/g, '/') + '-' + res.data.exclusiveEndTime.replace(/-/g, '/')) : '--';
          this.subcribeInfo.type = this.showType(res.data.type);
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.subcribe-common-dialog ::v-deep .el-form-item{
  margin-bottom:0!important;
}
.dialog-footer {
  margin-top: 10px
}
</style>
<style lang="scss">
@import "./common.scss";
</style>
